<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom练习</title>
</head>

<body>
    <h1 id="txt">DOM 练习</h1>
    <h1>BOM对象</h1>
    <h1 class="xiao">Mr_xiao</h1>
    <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女

    <!-- 
        2021/12/15作业
    1、创建三个数组，用for循环对数组进行遍历，使用console.log进行打印。
    2、创建三个对象，用foreach遍历对对象中的属性进行遍历，并且console.log进行打印。 
    3、创建一个单选框，通过js获取到选中的选项并且打印值。 
    4、创建一个多选框，通过js获取到选中的选项，要求这些选项使用,进行分割，最后打印出一个总的字符串。 
    5、创建一个下拉框，通过js添加一些选项进去，并设置某一个选项为默认选中。 
    6、对第1题的三个数组中的值进行字符串的拼接。
    -->
    <input type="radio" name="sexs" value="男生">男生
    <input type="radio" name="sexs" value="女生">女生
    <input type="checkbox" name="like" value="打游戏" />打游戏
    <input type="checkbox" name="like" value="打豆豆" />打豆豆
    <input type="checkbox" name="like" value="睡觉" />睡觉
    <select id="xx">
        <option>选项</option>
    </select>
</body>
<script>
    //页面加载完成时执行
    window.onload = function () {
        //1
        var num1=[1,23,421,231];
        var num2=[4,3,331,12];
        var num3=[2,23,221,131];
        for(let i=0;i<num1.length;i++){
            console.log(i,num1[i]);
        }
        for(let i=0;i<num2.length;i++){
            console.log(i,num2[i]);
        }
        for(let i=0;i<num3.length;i++){
            console.log(i,num3[i]);
        }
        //2
        var dx1={
        name:"下雨",
        age:18,
        addr:"湖南长沙",
        sr:new Date()
        };
        var dx2={
        name:"小舞",
        age:14,
        addr:"江西吉安",
        sr:new Date()
        };
        var dx3={
        name:"xiao",
        age:17,
        addr:"江西吉安",
        sr:"2004-06-25"
        };
        for(let i in dx1){
            console.log(i,dx1[i])
        }
        for(let i in dx2){
            console.log(i,dx2[i])
        }
        for(let i in dx3){
            console.log(i,dx3[i])
        }
        //3
        var sexs=document.querySelectorAll("[name=sexs]");
        for(let i in sexs){
            sexs[i].onchange=function(){
                if(this.checked==true){
                alert(this.value)
                }
            }
        }
        //4
        var likes=document.querySelectorAll("[name=like]");
        var szlikes=new Array();
        for(let i in likes){
            likes[i].onchange=function(){
                if(this.checked==true){
                    szlikes.push(this.value);
                }else{
                    szlikes.splice(szlikes.indexOf(this.value),1);
                }
                console.log("szlikes="+szlikes)
                
            }
        }
        //5
        var sel=document.querySelector("#xx");
        for(var a=0;a<=3;a++){
        var opt=document.createElement("option");
        opt.innerText="选项卡"+a;
        if(opt.innerText=='选项卡0'){
            // console.log(opt)
            opt.setAttribute("selected",true);  //设置默认值
        }
        sel.appendChild(opt);
        }
        //6
        var strs=num1.concat(num2.concat(num3));
        console.log("字符串拼接:"+strs)
        /*
        //getElementById    根据id获取
        var obj = document.getElementById("txt");
        obj.innerHTML = "修改了文本";
        console.log(obj);
        //getElementsByTagName  根据标签名获取(一个或多个)
        var tags = document.getElementsByTagName("h1");
        for (let i in tags) {
            tags[i].innerHTML = "循环更改文本" + i;
        }
        console.log(tags);
        //getElementsByClassName  根据类名获取(一个或多个)
        var cls=document.getElementsByClassName("xiao");
        console.log(cls)
        //getElementsByName 根据name属性获取对象
        var name=document.getElementsByName("sex");
        console.log(name);
        //querySelectorAll 通用
        obj=document.querySelectorAll("#txt");
        tags=document.querySelectorAll("h1");
        cls=document.querySelectorAll(".xiao");
        name=document.querySelectorAll("[name=sex]");
        console.log("name="+name);    
        for(let i in obj){
            obj[i].innerHTML="通用改变"
        }
        for (let i in tags) {
            tags[i].innerHTML = "通用改变循环更改文本" + i;
        }
        for (let i in cls) {
            cls[i].innerHTML = "通用改变循环更改文本class" + i;
        }
        */
    }
</script>

</html>